<template>
    <a-card class="general-card" style="padding-top:20px">
        <a-row>
          <a-col :flex="1">
            <a-form :model="formModel" label-align="right">
              <a-row :gutter="16">
                <a-space direction="horizontal" :size="5">
                  <a-form-item field="userName" label-col-flex="75px" label="统计县市区">
                    <a-select v-model="formModel.areaName.value" :style="{ width: '150px' }" allow-clear
                      placeholder="全部"
                      :trigger-props="{ autoFitPopupMinWidth: true }">
                      <a-option value="市本级">市本级</a-option>
                      <a-option value="黄州区">黄州区</a-option>
                      <a-option value="团风县">团风县</a-option>
                      <a-option value="红安县">红安县</a-option>
                      <a-option value="麻城市">麻城市</a-option>
                      <a-option value="罗田县">罗田县</a-option>
                      <a-option value="英山县">英山县</a-option>
                      <a-option value="浠水县">浠水县</a-option>
                      <a-option value="蕲春县">蕲春县</a-option>
                      <a-option value="武穴市">武穴市</a-option>
                      <a-option value="黄梅县">黄梅县</a-option>
                    </a-select>
                  </a-form-item>
  
                  <a-form-item field="quarter" label-col-flex="80px"
                  label="时间范围">
                  <a-range-picker
                    v-model="formModel.dateRange.value"
                    mode="date"
                    style="width: 284px;"
                  />
                  </a-form-item>
                
                  <a-form-item label-col-flex="0px" label="">
                    <a-space direction="horizontal" :size="12">
                      <a-button status="success" @click="fetchData">
                        <template #icon>
                          <icon-search />
                        </template>
                        查询
                      </a-button>
                      <a-button type="primary" status="warning" @click="addDataShowFun">
                        <template #icon>
                          <icon-plus />
                        </template>
                        新建
                      </a-button>
                      <a-button @click="leadAddShow">
                        <template #icon>
                          <icon-upload />
                        </template>
                        批量导入
                      </a-button>
                    </a-space>
                  </a-form-item>
                </a-space>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
        <a-table :data="renderData" :pagination="true" :bordered="false" :scrollbar="true"
          :scroll="{ x: '100%', y: '110' }">
          <template #columns>
            <a-table-column title="统计时间" align="center" data-index="statisticalYear" :width="120">
              <template #cell="{ record }">
                <span>
                  {{ record.createdTime.substring(0,10) }}
                </span>
              </template>
            </a-table-column>
            <a-table-column title="统计县市区" align="center" data-index="areaName" :width="110">
            </a-table-column>
            <a-table-column title="所有渠道办理的总办件数" align="center" data-index="allOrderCount" :width="130">
            </a-table-column>
            <a-table-column title="所有渠道办理涉及的总金额（万元）" align="center" data-index="allOrderMoney" :width="130">
            </a-table-column>
            <a-table-column title="i黄冈办理的办件数" align="center" data-index="ihgOrderCount" :width="110">
            </a-table-column>
            <a-table-column title="i黄冈办理涉及的金额（万元）" align="center" data-index="ihgOrderMoney" :width="110">
            </a-table-column>
            <a-table-column title="统计部门" align="center" data-index="departmentName" :width="100">
            </a-table-column>
            <a-table-column title="操作" align="center" :width="90" fixed="right">
              <template #cell="{ record }">
                <a-button type="outline" status="danger" shape="round" size="mini" @click="deleteItem(record)">
                  <template #default>删除</template>
                </a-button>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <!-- <a-pagination show-total show-jumper @change="jumpPage" :total="totalSize" style="margin-top: 8px;" /> -->
        <!-- <a-pagination show-total show-jumper @change="jumpPage" :total="totalSize" style="margin-top: 8px;" />-->
      </a-card>
  
      <!-- 侧边新增数据 -->
      <a-drawer :width="680" :visible="addvisible" @before-ok="handleAddOk" @cancel="handleCancel" unmountOnClose>
        <template #title>
          新增数据
        </template>
        <div>
          <a-form :model="addDataForm" layout="vertical" label-align="right">
            <a-row>
              <a-col :span="12">
                <a-form-item field="areaName" label-col-flex="100px" label="县市区" required>
                  <a-select v-model="addDataForm.areaName.value" placeholder="请选择" :style="{ width: '300px' }">
                    <a-option value="市本级">市本级</a-option>
                    <a-option value="黄州区">黄州区</a-option>
                    <a-option value="团风县">团风县</a-option>
                    <a-option value="红安县">红安县</a-option>
                    <a-option value="麻城市">麻城市</a-option>
                    <a-option value="罗田县">罗田县</a-option>
                    <a-option value="英山县">英山县</a-option>
                    <a-option value="浠水县">浠水县</a-option>
                    <a-option value="蕲春县">蕲春县</a-option>
                    <a-option value="武穴市">武穴市</a-option>
                    <a-option value="黄梅县">黄梅县</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label-col-flex="100px" label="提交日期"
                required>
                  <a-date-picker v-model="addDataForm.createdTime.value" value-format="YYYY-MM-DD" aria-readonly style="width: 300px;" />
                </a-form-item>
              </a-col>
  
              <a-col :span="12">
                <a-form-item field="allOrderCount" label-col-flex="100px" label="所有渠道办理的总办件数" required>
                  <a-input-number v-model="addDataForm.allOrderCount.value" :precision="0" :style="{ width: '300px' }" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="allOrderMoney" label-col-flex="100px" label="所有渠道办理涉及的总金额（万元）" required>
                  <a-input-number v-model="addDataForm.allOrderMoney.value" :precision="2" :style="{ width: '300px' }" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="ihgOrderCount" label-col-flex="100px" label="i黄冈办理的办件数" required>
                  <a-input-number v-model="addDataForm.ihgOrderCount.value" :precision="0" :style="{ width: '300px' }" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="ihgOrderMoney" label-col-flex="100px" label="i黄冈办理涉及的金额（万元）" required>
                  <a-input-number v-model="addDataForm.ihgOrderMoney.value" :precision="2" :style="{ width: '300px' }" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="departmentName" label-col-flex="100px" label="统计部门" required>
                    <a-input v-model="addDataForm.departmentName.value" :style="{ width: '300px' }" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="creator" label-col-flex="100px" label="填报人" required>
                    <a-input v-model="addDataForm.creator.value" readonly :style="{ width: '300px' }" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </a-drawer>
      <a-modal v-model:visible="toLeadVisible" @ok="toLeadOk" width="420px" title="表格导入">
        <a-row>
            <a-upload style="margin: 10px 20px;" action="/" draggable class="uploadDiv" accept=".xls,.xlsx"
                :auto-upload="false" :limit="1" ref="uploadRef" @change="onFileChange">
            </a-upload>
  
            <p style="margin-left: 70px;">仅允许导入 xls、xlsx 格式文件。
                <a-link @click="jumpDowmTemp">
                    <template #icon>
                        <icon-edit />
                    </template>
                    下载模板
                </a-link>
            </p>
        </a-row>
    </a-modal>

</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { Modal, Message } from '@arco-design/web-vue';
import { PropType } from 'vue';
import { postRequest, uploadFileRequest } from '@/api/common';
import { baseURL } from '@/api/base';
const props = defineProps({
    departmentName: {
      type: String,
      default: '',
    },
    projectName:{
        type: String,
        default: '',
    }
});

const formModel = {
  areaName: ref(""),
  dateRange: ref([]),
  pageNum: 1,
  pageSize: 10
};
let totalSize = ref(10);

// 
const toLeadVisible = ref(false);
//fileFlag
const upLoadFileFlag = ref(false);
//toLeadForm 上传文件
let toLeadForm: FormData = new FormData();

const jumpDowmTemp = ()=>{
   let departmentName = props.departmentName;
   let projectName = props.projectName;
   console.log(departmentName);
   console.log(projectName);
   window.location.href = baseURL + 'dsms/ihgDataProcess/downGovernmentDataTemplate?department='+departmentName+'&projectName='+projectName;
}

const leadAddShow = () => {
    toLeadVisible.value = true;
    toLeadForm = new FormData();
    upLoadFileFlag.value = false;
}
const onFileChange = (fileList: any) => {
    if (fileList != null && fileList.length > 0) {
        upLoadFileFlag.value = true; //by guo 2020-8-4-15:18添加
        toLeadForm = new FormData();
        toLeadForm.append("file", fileList[0].file);
        toLeadForm.append("userName", localStorage.getItem("userName") as any);
    } else {
        upLoadFileFlag.value = false; //by guo 2020-8-4-15:18添加
        toLeadForm = new FormData();
    }
};
const toLeadOk = async () => {
    if (upLoadFileFlag.value) {
      let res = await uploadFileRequest("dsms/ihgDataProcess/importGovernmentData", toLeadForm);
        if (res.data.code == 200) {
          fetchData();
            Message.success(res.data.message + " " + res.data.result + "条")
        } else {
            Message.error(res.data.message)
        }
    } else {
        Message.error("请选择文件");
        toLeadVisible.value = true;
    }
};


const addvisible = ref(false);
const addDataForm = {
  areaName: ref(""),
  // 这里将 createdTime 的初始值设置为当前日期时间的字符串形式，精确到时分秒
  createdTime: ref(new Date().toISOString().slice(0, 19).replace('T', ' ')),
  allOrderCount: ref(0),
  allOrderMoney: ref(0),
  ihgOrderCount: ref(0),
  ihgOrderMoney: ref(0),
  departmentName: ref(""),
  creator: ref(""),
}
const handleAddOk = async () => {
  if (addDataForm.areaName.value == null || addDataForm.areaName.value == "") {
    Message.error("请选择县市区");
    return false;
  }
  console.log(addDataForm);
  let res = await postRequest("dsms/ihgDataProcess/addGovernmentData", {
    areaName:addDataForm.areaName.value,
    departmentName:props.departmentName,
    projectName:props.projectName,
    createdTime:addDataForm.createdTime.value +" 00:00:00",
    allOrderCount:addDataForm.allOrderCount.value,
    allOrderMoney:addDataForm.allOrderMoney.value,
    ihgOrderCount:addDataForm.ihgOrderCount.value,
    ihgOrderMoney:addDataForm.ihgOrderMoney.value,
    creator:addDataForm.creator.value
  });
  if (res) {
    Message.success("添加成功");
    console.log(Message)
    addvisible.value = false;
    fetchData();
  }
  totalSize.value = Number(res.total);
}

const addDataShowFun = () => {
  addvisible.value = true;
  addDataForm.creator.value = localStorage.getItem("userName") as any;
  // 将 createdTime 赋值为当前日期时间的字符串形式，精确到时分秒
  addDataForm.createdTime.value = new Date().toLocaleDateString().replace(/\//g, '-');;
}
const handleCancel = () => {
  addvisible.value = false;
}

const deleteItem = async(record:any) => {
    Modal.warning({
        title:"是否确认删除",
        titleAlign:"center",
        content: '此操作会永久删除该数据,是否确认要删除?',
        hideCancel:false,
        onOk(){
           postRequest("dsms/ihgDataProcess/deleteGovernmentData",{id:record.id}).then(res=>{
                fetchData();
           })
        }
    })
}

let renderData = ref<any[]>([]);
const fetchData = async () => {
  let startTime = "";
  let endTime = "";
  if(formModel.dateRange.value!=null && formModel.dateRange.value.length>1){
    startTime = formModel.dateRange.value[0];
    endTime = formModel.dateRange.value[1];
  }
  let creator = localStorage.getItem("userName");
  if (localStorage.getItem("userRole") == "admin" || localStorage.getItem("userRole") == "socialwork"){
    creator = "";
  }
  let res = await postRequest("dsms/ihgDataProcess/queryGovernmentPage", {
    areaName:formModel.areaName.value,
    departmentName:props.departmentName,
    projectName:props.projectName,
    startTime: startTime,
    creator: creator,
    endTime: endTime,
    pageNum: formModel.pageNum,
    pageSize: 999
  });
  renderData.value = res.list;
  totalSize.value = Number(res.total);
}
function jumpPage(val: any) {
  formModel.pageNum = val;
  Message.success('This is an info message');
  fetchData();
}
fetchData();
</script>
<script lang="ts">
export default {
  name: 'commonGovernment',
};
</script>
<style scoped lang="less">
::v-deep(.arco-form-item){
  margin-bottom: 10px;
}
::v-deep(.arco-upload-progress){
  visibility: hidden;
}
</style>